<template>
  <div>
    <div v-if="searchStatus" class="box-shadow pad10 mgb10">
      <el-form :model="queryParams" ref="queryRef" :inline="true" class="fnmb">
        <el-row>
          <el-col :span="18">
            <el-form-item label="班级树形">
              <Selector
                category="班级级联"
                cascader="级联"
                v-model="queryParams.ID_Class"
              ></Selector>
            </el-form-item>
            <el-form-item label="关联证书">
              <Selector
                category="全部证书"
                v-model="queryParams.ID_Certificate"
              ></Selector>
            </el-form-item>
            <el-form-item label="启止时间">
              <el-date-picker
                v-model="queryParams.StartAndEnd"
                type="daterange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width:212px"
              />
            </el-form-item>
            <!-- <el-form-item label="启止时间">
              <el-time-picker
                style="width: 212px"
                v-model="queryParams.StartAndEnd"
                is-range
                range-separator="到"
                format="HH:mm"
                value-format="HH:mm"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item> -->
          </el-col>
          <el-col :span="6" class="flex acenter jend">
            <div>
              <el-button type="primary" icon="Search" round @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="Refresh" round @click="resetQuery"
                >重置</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <MyTable
      :tableList="tableList"
      :total="Total"
      :columns="columns"
      v-model:page="page"
      v-model:searchStatus="searchStatus"
      :btnList="[]"
      :customBtn="customBtn"
      @custom="handleCustom"
      @getList="getList"
    >
    </MyTable>
    <MyDialog
      v-model:show="show"
      :title="title"
      :formRef="formRef"
      :width="800"
      :showFooter="false"
    >
      <MyTable
        :tableList="formList"
        :toolbar="false"
        :columns="columns2"
        :btnList="[]"
        :customBtn="[{ name: '提交' }]"
        @custom="handleCustomSubmit"
      >
      </MyTable>
    </MyDialog>
  </div>
</template>

<script setup name="TextualResearchData">
import { ref, getCurrentInstance, onMounted } from "vue";
import {
  AddOrUpdateExam,
  GetExamList_Page,
  GetExamDetail,
} from "@/api/certificate/index.js";

const { proxy } = getCurrentInstance();
const tableList = ref([]);
const customBtn = proxy.$checkPermi(["TextualResearchData:enter"])
  ? [{ name: "录入" }]
  : [];
const Total = ref(0);
const columns = ref([
  { label: "序号" },
  { label: "日期", prop: "DateDay" },
  { label: "启止时间", prop: "StartAndEnd" },
  { label: "班级", prop: "Name_Class" },
  { label: "场地", prop: "Name_Place" },
  { label: "课程", prop: "Name_Course" },
  { label: "教师", prop: "Name_Teacher" },
  { label: "设备", prop: "Name_Device" },
  { label: "证书", prop: "Name_Certificate" },
  { label: "学生", prop: "StudentCount" },
  { label: "录入", prop: "RecordCount" },
  { label: "操作", width: 80 },
]);
const columns2 = ref([
  { label: "序号" },
  { label: "状态", prop: "Status", tag: true },
  { label: "学生姓名", prop: "Name_Student" },
  { label: "分数", prop: "Score", input: true },
  { label: "结果", prop: "Result", select: true, category: "结果" },
  { label: "操作", width: 80 },
]);

proxy.$formatKey(columns.value);
proxy.$formatKey(columns2.value);
const page = ref({
  PageIndex: 1,
  PageSize: 10,
});
const searchStatus = ref(true);
const queryParams = ref({
  Code: "",
  Name: "",
  NoPage: "", //如果传"true"，则返回全部数据不分页
});
const formList = ref([]);
const queryRef = ref();
const show = ref(false);
const title = ref();
const formRef = ref();
const rowData = ref({});
const rules = ref({
  Code: [{ required: true, message: "请输入", trigger: "blur" }],
  Name: [{ required: true, message: "请输入", trigger: "blur" }],
  Principal: [{ required: true, message: "请选择", trigger: "change" }],
});
const formData = ref({});

onMounted(() => {
  getList();
});

async function getList() {
  try {
    let query = {
      ...queryParams.value,
      ...page.value,
      StartTime: queryParams.value?.StartAndEnd?.[0],
      EndTime: queryParams.value?.StartAndEnd?.[1],
    };
    let res = await GetExamList_Page(query);
    res.data.List?.forEach((item) => {
      item.DateDay = item.DateDay?.slice(0, 10);
      item.StartAndEnd =
        item.StartTime?.slice(11, 16) + " -- " + item.EndTime?.slice(11, 16);
    });
    tableList.value = res.data.List;
    Total.value = res.data.Total;
  } catch (error) {
    console.log(error);
  }
}

async function handleCustomSubmit(row) {
  if (!row.Result) return proxy.$modal.msgError("请选择结果");
  try {
    let query = {
      ...row,
      ID: row.ID ? row.ID : undefined,
    };
    await AddOrUpdateExam(query);
    await handleCustom({ ID: rowData.value.ID });
    await getList();
    proxy.$modal.msgSuccess("提交成功");
  } catch (error) {
    console.log(error);
  }
}

async function handleCustom(row) {
  try {
    rowData.value = row;
    let res = await GetExamDetail({ ID: row.ID });
    res.data?.forEach((item) => {
      item.Status = [
        {
          name: item.Result ? "已录入" : "未录入",
          type: item.Result ? "success" : "danger",
        },
      ];
    });
    formList.value = res.data;
    title.value = "录入信息";
    show.value = true;
  } catch (error) {
    console.log(error);
  }
}

function handleEdit(row) {
  title.value = "修改";
  show.value = true;
}
async function handleDelete(row) {}
function handleAdd() {
  show.value = true;
  title.value = "添加区域";
}
function handleQuery() {
  page.value.PageIndex = 1;
  getList();
}
function resetQuery() {
  queryParams.value = {
    Code: "",
    Name: "",
    NoPage: "",
  };
  handleQuery();
}
</script>

<style lang="scss" scoped></style>
